<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>生命周期</h2>
    <p>count: {{ count }}</p>
    <button @click="handleClick">btn</button>

    <input type="text" v-model="textValue">

    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>


  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    // 生命周期一共有四个阶段
    // 生命周期的执行顺序和书写顺序无关,只跟生命周期的名字有关
    // 创建阶段和挂载阶段的生命周期函数是会自动执行的

    createApp({
      data() {
        return {
          count: 1,
          list: [],
          textValue: ""
        }
      },
      methods: {
        fn() {},
        handleClick() {
          this.count++;
        }
      },
      // 预编译模板选项
      // 可以理解为有template的话，就相当于是#app的innerhtml就为template的字符串
      // template: "<h2>hahahahah</h2>",

      // 创建阶段
      beforeCreate() {
        console.log("beforeCreate", this.count, this.fn); // undefined
        // 在这个时候，选项式api还没有被初始化
        // 在beforeCreate里面不应该去做网络请求
        // 没有办法做传值,也不能去接受请求的结果
        // 通常用不到这个生命周期

        // fetch("https://cnodejs.org/api/v1/topics?name= this.name ")
        //   .then(response => response.json())
        //   .then(res => {
        //     console.log(res);
        //     this.list = res.data;
        //   })
      },

      // vue自己去初始化了选项式api

      created() {
        console.log("created", this.count); // 1
        // 在这个时候，选项式api已经初始化了

        // 这里是能做数据请求最早的地方
        // fetch("https://cnodejs.org/api/v1/topics")
        //   .then(response => response.json())
        //   .then(res => {
        //     this.list = res.data;
        //   })
      },

      // vue查看是否有预编译模板

      // 挂载阶段
      beforeMount() {
        // #app里面还是空的，vue还没有帮我们插入dom节点
        // 在这里我们不能去使用任何和dom节点相关的内容
        console.log("beforeMount", document.querySelector("#app").innerHTML);
      },

      // vue初始渲染，创建和插入dom节点

      mounted() {
        // 页面已经全部加载完成了
        // 这里就可以使用所有的内容
        // mounted就相当于window.onload
        console.log("mounted", document.querySelector("#app").innerHTML);
        // fetch("https://cnodejs.org/api/v1/topics")
        //   .then(response => response.json())
        //   .then(res => {
        //     this.list = res.data;
        //   })
      },






      // 更新阶段
      // 更新阶段需要数据发生改变才会执行
      // 只要data里面的数据有一个发生改变，那么更新阶段的生命周期就会执行一次
      // 都是在数据改变以后执行，所以拿到的数据都是改变以后的数据
      beforeUpdate() {
        // 是在页面重新渲染之前
        console.log("beforeUpdate", this.count, document.querySelector("p").innerHTML);
        this.count++;
      },

      // vue去重新渲染了页面

      updated() {
        // 是在页面重新渲染之后
        // 注意点： 在updated里面不能去修改数据,会造成死循环
        console.log("updated", this.count, document.querySelector("p").innerHTML);
        // 可以做一些类似于百度搜索框的功能
        // console.log(this.textValue);

        // this.count++;
        
      },



      // 销毁阶段
      // 销毁阶段需要组件被取消挂载时才会执行
      beforeUnmount() {
        console.log("beforeUnmount");
      },
      unmounted() {
        console.log("unmounted");
      }
    }).mount("#app");
  </script>
</body>
</html>